<template>
  <view class="h-12 bg-white border-bottom" @click="jumpSelectUser">
    <view class="px-4 h-full flex items-center justify-between">
      <view>派币用户</view>
      <view class="flex items-center">
        <view class="text-sm text-slate-400 mr-2">
          <text v-if="pai_uid.length">{{ pai_uid.length || 0 }}人</text>
        </view>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="bg-white border-bottom">
    <view class="flex px-4 items-center h-12 ">
      <view class="w-max text-sm">派币数量</view>
      <input class="flex-1 pr-4 h-full ml-auto text-right" v-model="num" @keyup="num=num.replace(/^(0+)|[^\d]+/g,'')" placeholder-class="plcg" placeholder="请输入派币数量">
      <view>金币</view>
    </view>
  </view>

  <view class="border-bottom">
    <view class="flex px-4 gap-10 items-center h-14">
        <view class="w-max text-sm">消息通知类型</view>
        <!--&lt;!&ndash;v-model="accountInfo.type"&ndash;&gt;-->
        <picker class="flex-1 h-full flex items-center justify-end"  mode="selector" :range="operateRange" range-key="text" @change="selectOperator">
          <view>{{ operateRange[operateValue].text }}</view>
        </picker>

  </view>
  </view>

  <view class="text-center mt-8 text-2xl">派币总额 (金币)</view>
  <view class="text-center text-5xl text-indigo-500 mt-2">{{ amount }}</view>

  <view class="btn act-btn" v-if="isClick" @click="handlePaiCoin">派币</view>
  <view class="btn un-btn" v-else>派币</view>
</template>

<script setup lang="ts">
    import {reactive, ref, computed } from 'vue'
    import { doNowPaiCoinApi } from '@/api/marketing'
    import { userStore } from "@/store/userStore";
    import { onShow } from '@dcloudio/uni-app'
    import { throttle } from "@/api/common";
    import {uiwu} from "@/api/interface/interface";

    const paiUserList = ref([])
    const pai_uid = ref([])
    const num = ref('')
    const message_type = ref<number>(1)

    onShow(() => {
      uni.$off('selectUser')
      uni.$on('selectUser', function (data) {
        console.log('data====', data)
        // pai_uid.value = data
        // console.log('data=====', data)
        paiUserList.value = data.paiList
        pai_uid.value = data.paiList.map(item => item.uid)
        // console.log('pai_uid.value=====', pai_uid.value)
      })
    })

    const jumpSelectUser = () => {
      // uni.navigateTo({ url: '/pages/mine/selectUser' })

      uni.navigateTo({ url: '/pages/mine/selectUser?userData=' + JSON.stringify(paiUserList.value) })
    }

    /** 总额(金币) **/
    const amount = computed(() => {
      return pai_uid.value.length * Number(num.value)
    })

    const operateValue = ref<number>(0)
    const operateRange = reactive([
      { value: 1, text: '乐币到账提醒' },
      { value: 2, text: '系统补币乐币到账' },
      { value: 3, text: '充值特惠活动乐币到账' },
      { value: 4, text: '注册即送乐币到账' },
      { value: 5, text: '参与活动即送乐币到账' },
    ])

    const selectOperator = (opValue) => {
      operateValue.value = opValue.detail.value
      message_type.value = operateRange[opValue.detail.value].value
    }

    const isClick = computed(() => {
      return pai_uid.value.length && num.value
    })

    const userInfoData = userStore()
    const handlePaiCoin = throttle(async () => {
        const paiUidStr = pai_uid.value.toString()
        const res = await doNowPaiCoinApi({
          pai_uid: paiUidStr,
          num: num.value,
          message_type: message_type.value
        })
        if(res.status == 200) {
          userInfoData.updateUserInfo()
          uiwu.toast(res.msg)
          setTimeout(() => {
            uni.navigateBack()
          },3000)
        }
    }, 3000)
</script>

<style scoped lang="scss">
.btn {
  width: 500rpx;
  padding: 20rpx 0;
  margin: 0 auto;
  margin-top: 80rpx;
  border-radius: 40rpx;
  text-align: center;

  &.act-btn {
    background: #6366f1;
    color: #fff;
  }
  &.un-btn {
    border: 2rpx solid #ccc;
  }
}
</style>
